<template>
	<view class="profit-detail">

		<!-- 收益展示区域 -->
		<view class="profit-display">
			<view class="profit-label">累计收益</view>
			<text class="profit-amount">¥ {{ profitSummary.Totalincome || '0.00' }}</text>
		</view>

		<!-- 收益类型列表 -->
		<view class="profit-types">
			<!-- 消费收益 -->
			<view class="profit-item">
				<view class="item-left">
					<view class="icon-wrapper">
						<image class="consume-icon" :src="serverAddress+'img/icon-xfsy.png'"></image>
					</view>
					<view class="item-info">
						<text class="item-title">消费收益</text>
						<text class="item-desc">我的消费分润</text>
					</view>
				</view>
				<text class="item-amount">¥ {{profitSummary.Totalrebate|| '0.00'}}</text>
			</view>

			<!-- 邀请收益 -->
			<view class="profit-item-top">
				<view class="item-left">
					<view class="icon-wrapper">
						<image class="invite-icon" :src="serverAddress+'img/icon-tjsy.png'"></image>
					</view>
					<view class="item-info">
						<text class="item-title">邀请收益</text>
						<view class="item-desc-multi">
							<text class="desc-line">季度活动</text>
							<text class="desc-line">年度活动</text>
							<text class="desc-line desc-line-gray">推荐会员消费，含伙人及市运营奖励</text>
						</view>

					</view>
				</view>
				<view class="amount-detail">
					<text class="item-amount">¥ {{profitSummary.Recomincome|| '0.00'}}</text>
					<text class="amount-line">¥ {{profitSummary.invited_quarter_bonus_total|| '0.00'}}</text>
					<text class="amount-line">¥ {{profitSummary.invited_year_bonus_total|| '0.00'}}</text>

				</view>

			</view>

			<!-- 厂家销售总额 -->
			<view class="profit-item">
				<view class="item-left">
					<view class="icon-wrapper">
						<image class="factory-icon" :src="serverAddress+'img/icon-fuwu.png'"></image>
					</view>
					<view class="item-info">
						<text class="item-title">厂家销售总额</text>
						<text class="item-desc">厂家已完成1单总金额</text>
					</view>
				</view>
				<view class="apply-btn" @click="showSecurityAgreementModal">
					<text class="apply-text" v-if="!profitSummary.is_manufac">去申请</text>
					<text class="apply-text" v-else>¥ {{profitSummary.manufac_money}}</text>
				</view>
			</view>

			<!-- 商家销售总额 -->
			<view class="profit-item">
				<view class="item-left">
					<view class="icon-wrapper">
						<image class="merchant-icon" :src="serverAddress+'img/icon-shsj.png'"></image>
					</view>
					<view class="item-info">
						<text class="item-title">商家销售总额</text>
						<text class="item-desc">商家已完成1单总金额</text>
					</view>
				</view>
				<view class="apply-btn" @click="showSecurityAgreementModal">
					<text class="apply-text" v-if="!profitSummary.is_merchant">去申请</text>
					<text class="apply-text" v-else>¥ {{profitSummary.merchant_money}}</text>
				</view>
			</view>

			<!-- 云主收益 -->
			<view class="profit-item">
				<view class="item-left">
					<view class="icon-wrapper">
						<image class="cloud-icon" :src="serverAddress+'img/icon-dlr.png'"></image>
					</view>
					<view class="item-info">
						<text class="item-title">云主收益</text>
						<text class="item-desc">云主可获得推荐分润及其他奖励品牌!</text>
					</view>
				</view>
				<view class="apply-btn" @click="showSecurityAgreementModal">
					<text class="apply-text" v-if="!profitSummary.is_staff">去申请</text>
					<text class="apply-text" v-else>¥ {{profitSummary.staff_income_total}}</text>
				</view>
			</view>

			<!-- 合伙人分润 -->
			<view class="profit-item">
				<view class="item-left">
					<view class="icon-wrapper">
						<image class="partner-icon" :src="serverAddress+'img/icon-hhr.png'"></image>
					</view>
					<view class="item-info">
						<text class="item-title">合伙人分润</text>
						<text class="item-desc">成为合伙人每天享受平台的分润奖励!</text>
					</view>
				</view>
				<view class="apply-btn" @click="showSecurityAgreementModal">
					<text class="apply-text" v-if="!profitSummary.is_partner">去申请</text>
					<text class="apply-text" v-else>¥ {{profitSummary.partner}}</text>
				</view>
			</view>

			<!-- 市运营收益 -->
			<view class="profit-item">
				<view class="item-left">
					<view class="icon-wrapper">
						<image class="operation-icon" :src="serverAddress+'img/icon-dlr.png'"></image>
					</view>
					<view class="item-info">
						<text class="item-title">市运营收益</text>
						<text class="item-desc">市运营可享受运营区域所有会员的消费分润奖励!</text>
					</view>
				</view>
				<view class="apply-btn" @click="showSecurityAgreementModal">
					<text class="apply-text" v-if="!profitSummary.is_agent">去申请</text>
					<text class="apply-text" v-else>¥ {{profitSummary.agent}}</text>
				</view>
			</view>
		</view>
		<!-- 网站安全保密协议弹窗 -->

		<security-agreement-modal :show="showSecurityAgreement" @confirm="agreeSecurityAgreement"
			@cancel="showSecurityAgreement = false" />


	</view>
</template>

<script>
	import api from '@/api/index.js'
	import {
		inject
	} from 'vue'
	import SecurityAgreementModal from '@/components/SecurityAgreementModal.vue';
	export default {
		components: {
			SecurityAgreementModal
		},
		data() {
			return {
				serverAddress: inject('$serverAddress'),
				currentTab: 'all', // 当前选中的标签
				profitSummary: {

				},
				profitList: [],
				loading: false,
				page: 1,
				hasMore: true,
				// 安全协议弹窗状态
				showSecurityAgreement: false,
			}
		},

		onLoad(options) {
			// 根据传入的类型设置默认标签
			if (options.type) {
				this.currentTab = options.type
			}

			// 加载数据
			this.loadProfitSummary()
			this.loadProfitList()
		},

		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack()
			},

			// 切换标签
			switchTab(tab) {
				this.currentTab = tab
				this.page = 1
				this.hasMore = true
				this.profitList = []
				this.loadProfitList()
			},

			// 加载分润概览
			async loadProfitSummary() {
				try {
					const res = await api.profitApi.getIncome(1)
					if (res.r === 0) {
						this.profitSummary = res.data
					}
				} catch (error) {
					console.error('加载分润概览失败:', error)
				}
			},

			// 加载分润记录
			async loadProfitList() {
				if (this.loading) return

				this.loading = true

				try {
					const params = {
						page: this.page,
						limit: 20
					}

					// 根据当前标签添加状态筛选
					if (this.currentTab === 'pending') {
						params.status = 0
					} else if (this.currentTab === 'completed') {
						params.status = 1
					}

					const res = await api.profitApi.getProfitRecords(params)
					if (res.r === 0) {
						const newList = res.data.list || []

						if (this.page === 1) {
							this.profitList = newList
						} else {
							this.profitList = [...this.profitList, ...newList]
						}

						// 判断是否还有更多数据
						this.hasMore = newList.length >= 20
					}
				} catch (error) {
					console.error('加载分润记录失败:', error)
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					})
				} finally {
					this.loading = false
				}
			},

			// 加载更多
			loadMore() {
				if (!this.hasMore || this.loading) return

				this.page++
				this.loadProfitList()
			},

			// 跳转订单详情
			goOrderDetail(orderId) {
				if (!orderId) return

				uni.navigateTo({
					url: `/pages/order/detail?id=${orderId}`
				})
			},

			// 格式化时间
			formatTime(timestamp) {
				if (!timestamp) return ''

				const date = new Date(timestamp * 1000)
				const year = date.getFullYear()
				const month = String(date.getMonth() + 1).padStart(2, '0')
				const day = String(date.getDate()).padStart(2, '0')
				const hours = String(date.getHours()).padStart(2, '0')
				const minutes = String(date.getMinutes()).padStart(2, '0')

				return `${year}-${month}-${day} ${hours}:${minutes}`
			},
			// 显示安全协议
			showSecurityAgreementModal() {
				this.showSecurityAgreement = true
			},
			// 同意安全协议
			agreeSecurityAgreement() {
				// 这里可以添加同意协议后的逻辑，比如保存用户同意状态
				uni.setStorageSync('security_agreement_agreed', true)
				uni.showToast({
					title: '已同意协议',
					icon: 'success'
				})
				this.showSecurityAgreement = false
				uni.navigateTo({
					url: '/pages/identity/shenqing_more'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.profit-detail {
		background-color: #eeeeee;
		min-height: 100vh;
	}

	/* 导航栏 */
	.header {
		display: flex;
		align-items: center;
		background-color: #ff6b47;
		padding: 20rpx 30rpx;
		padding-top: calc(20rpx + var(--status-bar-height, 0));
		position: relative;
	}

	.header-left {
		position: absolute;
		left: 30rpx;
		z-index: 10;
	}

	.back-icon {
		font-size: 48rpx;
		color: #fff;
		font-weight: bold;
	}

	.header-title {
		flex: 1;
		text-align: center;
		font-size: 36rpx;
		color: #fff;
		font-weight: 500;
	}

	/* 收益展示区域 */
	.profit-display {
		padding: 50rpx 30rpx 60rpx;
		margin: 20rpx 30rpx;
		text-align: center;
		background: linear-gradient(135deg, #27B387 0%, #1e9c6f 50%, #27B387 100%);
		border-radius: 28rpx;
		box-shadow: 0 12rpx 32rpx rgba(39, 179, 135, 0.25), 
					0 4rpx 12rpx rgba(39, 179, 135, 0.15),
					inset 0 1rpx 0 rgba(255, 255, 255, 0.2);
		position: relative;
		overflow: hidden;
		
		&::before {
			content: '';
			position: absolute;
			top: -50%;
			right: -50%;
			width: 200%;
			height: 200%;
			background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 65%);
			pointer-events: none;
			animation: shimmer 3s ease-in-out infinite;
		}
		
		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 2rpx;
			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
		}
	}

	.profit-label {
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.9);
		font-weight: 400;
		margin-bottom: 16rpx;
		position: relative;
		z-index: 1;
		letter-spacing: 1rpx;
	}

	.profit-amount {
		font-size: 64rpx;
		color: #fff;
		font-weight: 700;
		letter-spacing: 4rpx;
		position: relative;
		z-index: 1;
		text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15),
					 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
		display: block;
		line-height: 1.2;
	}

	@keyframes shimmer {
		0%, 100% {
			opacity: 0.5;
			transform: translate(0, 0) rotate(0deg);
		}
		50% {
			opacity: 0.8;
			transform: translate(-10%, -10%) rotate(5deg);
		}
	}

	/* 收益类型列表 */
	.profit-types {
		padding: 0 30rpx 30rpx;
		margin-top: 10rpx;
	}

	.profit-item-top {
		display: flex;
		justify-content: space-between;
		// background-color: #fff;
		border-bottom: 2rpx solid #E8E8E8;
		padding: 20rpx 15rpx;
		// margin-bottom: 20rpx;
		// border-radius: 12rpx;
	}

	.profit-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 2rpx solid #E8E8E8;
		padding: 20rpx 15rpx;

	}

	.item-left {
		display: flex;
		align-items: flex-start;
		flex: 1;
	}

	.icon-wrapper {
		// width: 80rpx;
		// height: 80rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 24rpx;
		flex-shrink: 0;
	}

	.consume-icon {
		width: 50rpx;
		height: 45rpx;
	}

	.invite-icon {
		width: 50rpx;
		height: 50rpx;
	}

	.factory-icon {
		width: 50rpx;
		height: 50rpx;
	}

	.merchant-icon {
		width: 50rpx;
		height: 50rpx;
	}

	.cloud-icon {
		width: 50rpx;
		height: 50rpx;
	}

	.partner-icon {
		width: 50rpx;
		height: 50rpx;
	}

	.operation-icon {
		width: 50rpx;
		height: 50rpx;
	}

	.icon {
		font-size: 36rpx;
		width: 50rpx;
		height: 50rpx;
	}

	.item-info {
		flex: 1;
		width: 300rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.item-title {
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
		display: block;
	}

	.item-desc {
		font-size: 24rpx;
		color: #999;
		line-height: 1.4;

	}

	.item-desc-multi {
		margin-bottom: 12rpx;
	}

	.desc-line {
		font-size: 24rpx;
		color: #333;
		display: block;
		line-height: 1.4;
		margin-bottom: 4rpx;
	}

	.desc-line-gray {
		color: #999;
	}

	.amount-detail {
		display: flex;
		flex-direction: column;
		gap: 4rpx;
	}

	.amount-line {
		font-size: 24rpx;
		color: #FF2E00;
		margin-left: 20rpx;
	}

	.item-amount {
		font-size: 32rpx;
		color: #FF2E00;
		font-weight: 500;
	}

	.apply-btn {
		border: 2rpx solid #FF2E00;
		border-radius: 8rpx;
		padding: 8rpx 12rpx;
		margin-left: 20rpx;
		display: flex;
		align-items: center;
	}

	.apply-text {
		font-size: 24rpx;
		color: #FF2E00;
	}
	::v-deep .u-modal__content {
		padding: 0 !important;
	}
</style>